<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">
				结算查询
			</section>
			<a-row :gutter="16">
				<a-col :span="8">
					<span class="label">订单号：</span>
					<a-input :max-length="100" @keyup.enter="search" allow-clear v-model="orderId" placeholder="请输入订单号"/>
				</a-col>
				<a-col :span="8">
					<span class="label">承租人：</span>
					<a-input :max-length="100" @keyup.enter="search" allow-clear v-model="travellerName" placeholder="请输入承租人姓名"/>
				</a-col>
				<a-col :span="8">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a href="javascript:;" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</a>
				</a-col>
        <a-col v-bind="colSpan">
          <span class="label">联系方式：</span>
          <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="phone" placeholder="请输入承租人联系方式"/>
        </a-col>
        <a-col v-bind="colSpan">
          <span class="label">服务门店：</span>
         <!-- <a-select @change="search" class="w-full" allow-clear v-model="storeId" placeholder="请选择服务门店">
            <a-select-option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
		  <newStoreList   placeholder="请选择服务门店"
		          v-model="storeId"
		          :options="{ allowClear: true }"
		          @change="search" class="flex-1 overflow-hidden"/>
		      </a-col>
        </a-col>
        <a-col v-show="isExpand" v-bind="colSpan">
          <span class="label">来源渠道：</span>
          <!-- <a-select @change="search" class="w-full" allow-clear v-model="channelId" placeholder="请选择来源渠道">
            <a-select-option v-for="item in channelList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
		  <sourceChannel placeholder="请选择来源渠道"
		          v-model="channelId"
		          :options="{ allowClear: true }"
		          @change="search" class="flex-1 overflow-hidden" />
		      </a-col>
        </a-col>
			</a-row>
			<a-row :gutter="16" v-show="isExpand">
				<a-col v-bind="colSpan">
					<span class="label">订单状态：</span>
					<a-select @change="search" v-model="status" class="w-full" allow-clear placeholder="请选择状态">
						<a-select-option v-for="item in orderStatusEnums" :value="item.value" :key="item.value">{{item.name}}</a-select-option>
					</a-select>
				</a-col>
        <a-col v-bind="colSpan">
          <span class="label">车型名称：</span>
          <SelectVehicleType
            class="flex-1"
            placeholder="请选择车型"
            v-model="vehicleTypeId"
            :options="{allowClear: true}"
            @change="search"
          />
        </a-col>
				<a-col v-bind="colSpan">
					<span class="label">预计取车：</span>
					<a-range-picker
						@ok="search"
						v-model="reservingPickupTimeArr"
						class="w-full"
						show-time
						placeholder="请选择预计取车时间"/>
				</a-col>
				<a-col v-bind="colSpan">
					<span class="label">实际取车：</span>
					<a-range-picker
						@ok="search"
						v-model="realityPickupTimeArr"
						class="w-full"
						show-time
						placeholder="请选择实际取车时间"/>
				</a-col>
				<a-col v-bind="colSpan">
					<span class="label">预计还车：</span>
					<a-range-picker
						@ok="search"
						v-model="reservingReturnTimeArr"
						class="w-full"
						show-time
						placeholder="请选择预计还车时间"/>
				</a-col>
				<a-col v-bind="colSpan">
					<span class="label">实际还车：</span>
					<a-range-picker
						@ok="search"
						v-model="realityReturnTimeArr"
						class="w-full"
						show-time
						placeholder="请选择实际还车时间"/>
				</a-col>
			</a-row>
      <a-divider class="mt-12"/>
			<section class="mb-16 flex justify-between">
        <a-button v-if="$permissionJudge('OrderSettle')" type="primary" icon="plus" @click="$refs.settlement.open()">结算</a-button>
				<section class="mb-4">已结算订单 <span class="primary-color text-24 font-bold">{{ statisticsInfo.orderCount }}</span>单，结算金额共计<span class="primary-color text-24 font-bold">{{ statisticsInfo.settleAmount }}</span>元</section>
			</section>
			<a-table
				class="mt-16"
				:columns="columns"
				:data-source="data"
				:scroll="scroll"
				:pagination="pagination"
			>
        <template #orderId="orderId, data">
          <section class="order-no">
						<router-link :to="{name: 'OrderList', params: {orderId}}">{{ orderId }}</router-link>
          </section>
          <section class="my-4 text-12 text-gray">创建时间：</section>
          <section class="text-gray">{{ data.createTime }}</section>
        </template>
        <section class="text-333 font-bold" slot="travellerName" slot-scope="travellerName, data">
          <section>{{ travellerName }}</section>
          <section class="mt-4">{{ data.phone }}</section>
        </section>
        <section class="font-bold" slot="estimatedPickupAndReturnTime" slot-scope="val, data">
          <section class="flex items-center">
            <section class="tag orange-bg">预取</section>
            <section class="orange-color">{{ data.reservingPickupTime }}</section>
          </section>
          <section class="my-6 flex items-center">
            <section class="tag grey-bg">预还</section>
            <section class="text-666">{{ data.reservingReturnTime }}</section>
          </section>
          <section class="primary-color">{{ data.realRentHours | formatHours }}天</section>
        </section>
        <section slot="vehicleDesc" slot-scope="vehicleDesc, data">
          <section v-if="data.vehicleLicenceNum" class="vehicle-num primary-bg mb-6">{{ data.vehicleLicenceNum }}</section>
          <section>{{ vehicleDesc }}</section>
        </section>
        <template #pickupStore="val, data">
          <section class="tag orange-bg inline-block">{{ data.isPickupOnDoor ? '送车上门' : '门店取车' }}</section>
          <section class="my-4 text-333 font-bold">{{ data.pickupStoreName }}</section>
          <section class="text-12">{{ data.pickupAddress }}</section>
        </template>
        <template #returnStore="val, data">
          <section class="tag orange-bg inline-block">{{ data.isDropoffOnDoor ? '上门取车' : '门店还车' }}</section>
          <section class="my-4 text-333 font-bold">{{ data.pickupStoreName }}</section>
          <section class="text-12">{{ data.pickupAddress }}</section>
        </template>
        <template #vendorName="vendorName, data">
          <img :src="data.vendorLogo || '/avatar.png'" alt="" class="vendor-logo">
          <section>{{ vendorName }}</section>
        </template>
        <template #modifyPriceSituation="val, data">
          <section class="mb-4">{{ data.channelName || '门店下单' }}</section>
          <a-tooltip placement="topLeft">
            <section slot="title">
              <section>引流价格：￥{{ data.totalActualFee }}</section>
              <section>实际价格：￥{{ data.totalRealActualFee }}</section>
            </section>
            <section class="font-bold error-color text-16">￥{{ data.totalActualFee }}</section>
          </a-tooltip>
        </template>
        <template #settleAmount="settleAmount, data">
          <section class="mt-4 font-bold error-color text-16">￥{{ settleAmount }}</section>
        </template>
				<template #action="val, data">
          <a
            href="javascript:;"
            v-if="$permissionJudge('OrderQuery')"
            @click="viewLog(data)"
          >订单日志</a>
				</template>
			</a-table>
		</a-card>
    <Log ref="log" :type="4">
      <section slot="title" class="title">
        <section>订单日志</section>
        <section class="dot"/>
        <section>{{ currOrder.orderId }}</section>
      </section>
    </Log>
    <Settlement ref="settlement" @success="getSettleStatisticInfo();search()"/>
	</a-spin>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import newStoreList from '@/components/storeList'
import sourceChannel from '@/components/sourceChannel'
import {isEmpty, each} from 'lodash'
import {getAllStores} from '@/api/store'
import {getOrderSettleList, getSettleStatisticInfo} from '@/api/order/settlement'
import SelectVehicleType from '@/components/SelectVehicleType'
import Settlement from './Settlement'
export default {
  name: 'OrderSettlement',
  components: {
    Settlement,
    SelectVehicleType,
	newStoreList,
	sourceChannel
  },
  mixins: [tableMixins],
  data() {
    return {
      loading: false,
      isExpand: false,
      loadedSearchData: false,
      // 搜索参数
      orderId: '',
      travellerName: '',
      channelId: undefined,
      storeId: undefined,
      status: undefined,
      vehicleTypeId: undefined,
      phone: '',
      reservingPickupTimeArr: [undefined, undefined],
      realityPickupTimeArr: [undefined, undefined],
      reservingReturnTimeArr: [undefined, undefined],
      realityReturnTimeArr: [undefined, undefined],
      // 搜索参数 end
      statisticsInfo: {},
      currOrder: {},
      colorMap: {
        0: '#F5222D',
        1: '#1890FF',
        2: '#ff6600',
        3: '#13C2C2',
        4: '#078e00'
      },
      orderStatusEnums: [],
      colSpan: {
        xl: 12,
        xxl: 8
      },
      channelList: [],
      storeList: [],
      columns: [
        {title: '订单号', dataIndex: 'orderId', width: 200, scopedSlots: {customRender: 'orderId'}},
        {
          title: '承租人',
          dataIndex: 'travellerName',
          width: 200,
          scopedSlots: {customRender: 'travellerName'},
        },
        {
          title: '服务车辆',
          width: 320,
          dataIndex: 'vehicleDesc',
          scopedSlots: {customRender: 'vehicleDesc'}
        },
        {title: '还车门店', dataIndex: 'returnStore', width: 320, scopedSlots: {customRender: 'returnStore'}},
        {
          title: '订单金额',
          dataIndex: 'modifyPriceSituation',
          width: 160,
          scopedSlots: {customRender: 'modifyPriceSituation'},
        },
        {title: '结算金额', dataIndex: 'settleAmount', width: 160, scopedSlots: {customRender: 'settleAmount'}},
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 100,
          scopedSlots: {customRender: 'action'},
          align: 'center'
        }
      ],
      data: []
    }
  },
  computed: {
    scroll() {
      return {x: this.data.length === 0 ? undefined : 1200}
    }
  },
  watch: {
    isExpand(val) {
      if (val && !this.loadedSearchData) {
        this.getChannelList()
        this.loadedSearchData = true
      }
    }
  },
  async created() {
    this.orderStatusEnums = await this.$utils.getDictList('OrderStatus')
    // getAllStores().then(data => this.storeList = data)
    this.search()
  },
  methods: {
    getData() {
      this.loading = true
      getOrderSettleList(this.getParams()).then(data => {
        this.total = data.rowCount
        this.data = data.items
      }).catch(err => {
      }).finally(() => this.loading = false)
    },
    search() {
      this.pageNum = 1
      this.getSettleStatisticInfo()
      this.getData()
    },
    getSettleStatisticInfo() {
      getSettleStatisticInfo(this.getParams()).then(data => {
        this.statisticsInfo = data
      })
    },
    viewLog(data) {
      this.currOrder = data
      this.$refs.log.open(data.orderId)
    },
    getParams() {
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        orderId: this.orderId.trim() || undefined,
        travellerName: this.travellerName.trim(),
        channelId: this.channelId,
        storeId: this.storeId,
        status: this.status,
        vehicleTypeId: this.vehicleTypeId,
        phone: this.phone.trim(),
        reservingPickupTimeStart: this.$utils.getStartTime(this.reservingPickupTimeArr[0]),
        reservingPickupTimeEnd: this.$utils.getEndTime(this.reservingPickupTimeArr[1]),
        realityPickupTimeStart: this.$utils.getStartTime(this.realityPickupTimeArr[0]),
        realityPickupTimeEnd: this.$utils.getEndTime(this.realityPickupTimeArr[1]),
        reservingReturnTimeStart: this.$utils.getStartTime(this.reservingReturnTimeArr[0]),
        reservingReturnTimeEnd: this.$utils.getEndTime(this.reservingReturnTimeArr[1]),
        realityReturnTimeStart: this.$utils.getStartTime(this.realityReturnTimeArr[0]),
        realityReturnTimeEnd: this.$utils.getEndTime(this.realityReturnTimeArr[1]),
      }
    },
    reset() {
      this.orderId = ''
      this.travellerName = ''
      this.channelId = undefined
      this.status = undefined
      this.vehicleTypeId = undefined
      this.phone = ''
      this.reservingPickupTimeArr = [undefined, undefined]
      this.realityPickupTimeArr = [undefined, undefined]
      this.reservingReturnTimeArr = [undefined, undefined]
      this.realityReturnTimeArr = [undefined, undefined]
      this.search()
    },
    getChannelList() {
      // this.$utils.getChannel().then(data => {
      //   this.channelList = data
      // })
    }
  }
}
</script>
<style lang="less" scoped>
  @orange: #FAAD14;
  @blue: #1890FF;
  @purple: #722ED1;
  @lightCyan: #13C2C2;
  @green: #52C41A;
  @lightRed: #FA541C;
  @red: #F5222D;
  .ant-col {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .label {
      flex-shrink: 0;
      width: 86px;
      text-align: right;
      font-size: 14px;
      color: #595959;
    }

    .w-full {
      flex: 1;
    }
  }
  .order-table {
    /deep/ .ant-table {
      .ant-table-tbody > tr > td {
        padding: 16px 8px;
        color: #333;
      }
    }
  }
  .text-333 {
    color: #333
  }
  .tag {
    margin-right: 7px;
    padding: 4px;
    line-height: 1;
    border-radius: 3px;
    font-size: 12px;
    color: #ffffff;
    font-weight: normal;
    &.orange-bg {
      background-color: #ff6600;
    }
    &.grey-bg {
      background-color: #929292
    }
  }
  .vehicle-num {
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    border-radius: 3px;
  }
  .orange-color {
    color: #ff6600
  }
  .text-666 {
    color: #666;
  }
  .text-gray {
    color: #999
  }
  .order-status {
    &-0 {
      color: @red
    }

    &-2 {
      color: @blue
    }

    &-3 {
      color: @orange
    }

    &-4 {
      color: @lightCyan
    }

    &-5 {
      color: @green
    }
  }

  .title {
    display: flex;
    align-items: center;

    .dot {
      width: 4px;
      height: 4px;
      margin: 0 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.65);
    }
  }

  .text-orange {
    color: @orange
  }

  .bg-orange {
    background: @orange;
  }

  .text-blue {
    color: @blue
  }

  .bg-blue {
    background: @blue
  }

  .text-purple {
    color: @purple
  }

  .bg-purple {
    background: @purple
  }

  .text-lightRed {
    color: @lightRed
  }

  .bg-lightRed {
    background: @lightRed
  }

  .text-red {
    color: @red
  }

  .bg-red {
    background: @red
  }

  .vendor-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 0;
    border: 1px solid #e1e1e1
  }

  /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }

  /deep/ .ant-table-body {
    overflow: auto !important;
  }

  /*/deep/ .ant-tabs {*/
  /*  .ant-tabs-content {*/
  /*    padding: 10px 24px 0;*/
  /*    min-height: calc(100vh - 480px);*/
  /*    max-height: calc(100vh - 420px);*/
  /*    overflow: auto*/
  /*  }*/

  /*  .ant-tabs-tab {*/
  /*    margin-right: 20px;*/
  /*  }*/

  /*  .ant-tabs-nav-container {*/
  /*    font-size: 16px;*/
  /*  }*/
  /*}*/
</style>
